<template>
  <div class="top">
    <img class="imgicon" src="/static/img/hoticon.png" alt="">
    <section class="containter">
      <div class="box" v-for="(item, index) in booklist" :key="index" @click="jumpTo(item)">
        <a class="col-sm-4 img-book box-content">
          <dt><img :src="item.imgurl ? item.imgurl : '/static/img/' + item.id + '.png'" class="img-box box-content">
          </dt>
          <dd class="content mt-1">
            <p>{{ strlen(item.name) > 20 ? item.name.substring(0, 10) + "..." : item.name }}</p>
            <p class="small">{{ item.author }}</p>
            <!-- <p>{{ item.content.length > 84 ? item.content.substring(0, 84) + "..." : item.content }}</p> -->
          </dd>
        </a>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: false,
      keyword: '',
      pagenum: 0,
      retlist: null,
      booklist: []
    }
  },

  mounted() {
    this.$http.post('api/index', {
      pagenum: this.pagenum,
      pagesize: 8
    }
    /*, { emulateJSON: true } */
    ).then((response) => {
      // this.booklist = response.body.data.list
      this.booklist = response.data.data
    })
  },
  methods: {

    jumpTo(target) {
      this.$router.push({
        path: '/cover',
        query: {
          name: target.name,
          imgurl: target.imgurl,
          author: target.author,
          content: target.content,
          count: target.count,
          update_time: target.update_time,
          taps: target.taps,
          star: target.star,
          collection: target.collection,
          id: target.id
        }
      })
      // this.$router.push({path:'/cover', query: {target: target}})
    },
    strlen(str) {
      var len = 0
      for (var i = 0; i < str.length; i++) {
        var c = str.charCodeAt(i)
        // 单字节加1
        if ((c >= 0x0001 && c <= 0x007e) || (c >= 0xff60 && c <= 0xff9f)) {
          len++
        } else {
          len += 2
        }
      }
      return len
    }
  }
}
</script>

<style lang='scss' scoped>
  .imgicon {
    width: 25%;
  }

  .box {
    padding: .2rem;
  }

  .box-content {
    max-height: 8rem;
  }

  .containter {
    // height: 100vh;
    display: grid;
    justify-content: center;
    align-content: center;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: auto auto auto auto;
  }

  .blockquote, embed, iframe, img, object, ol, p, pre, table, ul, video {
    margin: 0 0 0.15rem 0;
  }
</style>
